<template>
    <div class="showinfor">
      <div  class="infor"
            v-for="infor in inforlist"
            :key="infor.sendtime"
            :class="infor.yornsend">
          <div class="headimg">
            <img v-if="infor.yornsend === 'left'" :src="friendinfor.headimg" />
            <img v-if="infor.yornsend === 'right'" :src="myinfor.headimg" />
          </div>
          <div class="infortext">{{infor.infortext}}</div>
      </div>
    </div>
</template>

<script>
import { computed } from 'vue';
import { useStore } from 'vuex';

export default {
  name: 'Showinfor',
  setup() {
    const Store = useStore();
    // 获得当前聊天对象的callcode
    const iscall = Store.state.basicinfor.iscallcode;
    // 获得聊天对象的信息
    const friendinfor = Store.state.friendlist.friendslist.find((item) => item.callcode === iscall);
    // 获得自己的信息
    const myinfor = Store.state.basicinfor.userinfor;
    // 获取所有的聊天记录
    const inforlist = computed(() => Store.state.information.infors[iscall].text);
    return {
      inforlist,
      friendinfor,
      myinfor,
    };
  },
};
</script>

<style scoped>
    .showinfor{
        margin: 50px 10px 100px 10px;
    }
    .infor{
        display: flex;
        padding: 10px 5px;
    }
    .headimg{
        width: 40px;
        height: 40px;
        margin-left: 5px;
    }
    .headimg img{
        width: 35px;
        height: 35px;
        border-radius: 50%;
    }
    .infortext{
        padding: 5px;
        border-radius: 5px;
        background-color: #ffffff;
    }
    .right{
        flex-flow: row-reverse;
    }
</style>
